<template>
    <view >
        <u-navbar
            title="datetimePicker 时间日期选择器"
            @leftClick="navigateBack"
            safeAreaInsetTop
            fixed
            placeholder
        ></u-navbar>

        <u-cell-group>
            <u-cell
                @click="showDatetimePicker(index)"
                :title="item.title"
                v-for="(item, index) in list"
                :key="index"
                isLink
            >
                <template #icon>
                    <image class="u-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
                </template>
            </u-cell>

            <u-cell title="默认Input">
                <template #value>
                    <u-datetime-picker
                        mode="date"
                        v-model="value11"
                        closeOnClickOverlay
                        showInput
                    ></u-datetime-picker>
                </template>
                <template #icon>
                    <image 
                        src="https://cdn.uviewui.com/uview/demo/datetime-picker/4.png"
                        class="u-cell-icon"
                        mode="widthFix"
                    ></image>
                </template>
            </u-cell>
            <u-cell title="使用触发器">
                <template v-slot:value>
					<u-datetime-picker
                        mode="datetime"
                        closeOnClickOverlay
                        @confirm="confirm10"
                    >
						<u-input
							style="width:100%"
							v-model="value10"
							placeholder="请选择日期时间"
							disabled-color="#fff"
							disabled
							clearable
						/>
                    </u-datetime-picker>
                </template>
                <template #icon>
                    <image
                        class="u-cell-icon"
                        src="https://cdn.uviewui.com/uview/demo/datetime-picker/5.png"
                        mode="widthFix"
                    ></image>
                </template>
            </u-cell>
        </u-cell-group>
        <u-datetime-picker
            :show="show1"
            v-model="value1"
            mode="datetime"
            closeOnClickOverlay
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
        ></u-datetime-picker>
        <u-datetime-picker
            :show="show2"
            v-model="value2"
            mode="date"
            closeOnClickOverlay
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
        ></u-datetime-picker>
        <u-datetime-picker
            :show="show3"
            v-model="value3"
            mode="year-month"
            closeOnClickOverlay
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
        ></u-datetime-picker>
        <u-datetime-picker
            :show="show4"
            v-model="value4"
            mode="time"
            closeOnClickOverlay
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
        ></u-datetime-picker>
        <u-datetime-picker
            :show="show5"
            v-model="value5"
            :filter="filter"
            mode="date"
            closeOnClickOverlay
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
        ></u-datetime-picker>
        <u-datetime-picker
            :show="show6"
            v-model="value6"
            mode="date"
            :formatter="formatter"
            closeOnClickOverlay
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
        ></u-datetime-picker>
        <u-datetime-picker
            :show="show7"
            v-model="value7"
            mode="datetime"
            :minDate="1587524800000"
            :maxDate="1786778555000"
            closeOnClickOverlay
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
        ></u-datetime-picker>
        <u-datetime-picker
            :show="show8"
            ref="asyncValue8"
            v-model="value8"
            mode="datetime"
            closeOnClickOverlay
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
        ></u-datetime-picker>
        <u-datetime-picker
            :show="show9"
            v-model="value9"
            mode="year"
            closeOnClickOverlay
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
        ></u-datetime-picker>
    </view>
</template>
<script>
    export default {
        onShow() {
            // 模拟异步设置时间 asyncValue8
            setTimeout(() => {
                this.asyncValue8 = '2025-12-19 11:28:10';
            }, 500);
        },
        data() {
            const d = new Date();
            const year = d.getFullYear();
            let month = uni.$u.padZero(d.getMonth() + 1);
            const date = d.getDate();
            return {
                current: 0,
                value1: '',
                value2: '',
                value3: '2025-03-03',
                value4: '05:28',
                value5: '',
                value6: '',
                value7: '',
                //	value8: Number(new Date()),
                value9: '',
                value10: '',
                value11: '',
                asyncValue8: null,
                show1: false,
                show2: false,
                show3: false,
                show4: false,
                show5: false,
                show6: false,
                show7: false,
                show8: false,
                show9: false,
                show10: false,
                list: [
                    {
                        title: '完整日期时间',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/datetime-picker/6.png',
                    },
                    {
                        title: '年月日',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/datetime-picker/4.png',
                    },
                    {
                        title: '年月',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/datetime-picker/3.png',
                    },
                    {
                        title: '时间',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/datetime-picker/5.png',
                    },
                    {
                        title: '过滤器(保留偶数年)',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/datetime-picker/2.png',
                    },
                    {
                        title: '格式化',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/datetime-picker/1.png',
                    },
                    {
                        title: '限制最大最小值',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/datetime-picker/7.png',
                    },
                    {
                        title: '异步设置时间',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/datetime-picker/6.png',
                    },
                    {
                        title: '只选择年',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/datetime-picker/3.png',
                    },
                ],
            };
        },
        computed: {
            value8: {
                get() {
                    return this.asyncValue8
                        ? this.asyncValue8
                        : Number(new Date());
                    // return this.asyncValue8 || Number(new Date())
                },
                set(newValue, oldValue) {
                    // this.asyncValue8 = uni.$u.timeFormat(newValue, 'yyyy-mm-dd hh:MM:ss')
                    this.asyncValue8 = newValue;
                    this.show8 = false;
                },
            },
        },
        methods: {
            close() {
                this[`show${this.current}`] = false;
            },
            cancel() {
                this[`show${this.current}`] = false;
            },
            confirm(e) {
                this[`show${this.current}`] = false;
                this.result(e.value, e.mode);
            },
            confirm10(e) {
                this.value10 = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
            },
            change(e) {
                console.log('change', e);
            },
            navigateBack() {
                uni.navigateBack();
            },
            formatter(mode, value) {
                if (mode === 'year') {
                    return `${value}年`;
                }
                if (mode === 'month') {
                    return `${value}月`;
                }
                return value;
            },
            filter(mode, options) {
                if (mode === 'year') {
                    return options.filter((option) => option % 2 === 0);
                }

                return options;
            },
            showDatetimePicker(index) {
                this.current = index + 1;
                this[`show${index + 1}`] = true;
            },
            result(time, mode) {
                const timeFormat = uni.$u.timeFormat,
                    toast = uni.$u.toast;
                switch (mode) {
                    case 'datetime':
                        return toast(timeFormat(time, 'yyyy-mm-dd hh:MM'));
                    case 'date':
                        return toast(timeFormat(time, 'yyyy-mm-dd'));
                    case 'year-month':
                        return toast(timeFormat(time, 'yyyy-mm'));
                    case 'time':
                        return toast(time);
                    default:
                        return '';
                }
            },
        },
    };
</script>

